<template>
  <div id="activeAnalysis">
    <h1 class="con-right-title">
      活动分析
    </h1>
    <!-- <h3 class="echarts-title">活跃统计分析</h3>-->
    <!--上部搜索条件组件-->
    <topSearch :form-inline="formInline" @toSearch="toSearch"></topSearch>
    <!-- 操作按钮 -->
    <div class="table-conBtn">
      <el-button
        v-permission="'wh:system:active:export'"
        type="warning"
        icon="el-icon-download"
        @click="exportRoles"
      >
        导出
      </el-button>
      <freshCom @searchList="searchList"></freshCom>
    </div>
    <!--下部table-->
    <el-table
      v-loading="loading"
      :data="tableData"
      stripe
      style="width: 100%"
      max-height="490"
      ref="table"
    >
      <el-table-column type="index" width="60" label="序号">
        <template slot-scope="scope">
          {{
            scope.$index
              | filterPage(searchParams.pageNum, searchParams.pageSize)
          }}
        </template>
      </el-table-column>
      <el-table-column
        label="活动ID"
        prop="id"
        show-overflow-tooltip
        min-width="110"
      ></el-table-column>
      <el-table-column
        label="活动名称"
        prop="actName"
        min-width="140"
      ></el-table-column>
      <el-table-column
        label="活动日期"
        show-overflow-tooltip
        prop="actDateArea"
        min-width="180"
      >
      </el-table-column>
      <el-table-column
        label="发布日期"
        show-overflow-tooltip
        prop="actSubmitDate"
        min-width="140"
      >
      </el-table-column>
      <el-table-column
        label="活动类型"
        show-overflow-tooltip
        prop="actType"
        min-width="140"
      >
      </el-table-column>
      <el-table-column label="状态" prop="actStatus" min-width="120">
        <template slot-scope="scope">
          {{ getStatus(scope.row.actStatus) }}
        </template>
      </el-table-column>
      <el-table-column
        label="活动点击人数"
        prop="actDjCnt"
        min-width="110"
      ></el-table-column>
      <el-table-column
        label="活动发帖数"
        show-overflow-tooltip
        prop="actPosts"
        min-width="110"
      >
      </el-table-column>
    </el-table>
    <!--分页-全局组件-->
    <pageCom
      :searchParams="searchParams"
      :total="total"
      @searchList="searchList"
    ></pageCom>
  </div>
</template>

<script>
import {
  getSearchList,
  exportUrl
} from '@/api/dataStatistics/activeAnalysis/index.js' // 接口
import topSearch from '@component/dataStatistics/activeAnalysis/topSearch' // 上部搜索条件
import { saveScrollMixins } from '@/mixins/saveScroll'
export default {
  name: 'analyse',
  msg: '活动分析',
  mixins: [saveScrollMixins],
  components: {
    topSearch
  },
  data() {
    return {
      loading: true,
      total: 0,
      tableData: [], // table内容
      searchParams: {
        pageNum: 1, // 当前页数
        pageSize: 10 // 页面显示条数
      },
      formInline: {
        // 搜索条件
        activityId: '', // 活动ID
        startDate: '', // 开始时间
        endDate: '', // 结束时间
        createTime: []
      },
      multipleSelection: [],
      powerStr: 'system:active:list', // 是否查询的标识
      canGetList: true, // 是否可以查询列表
      powerAry: [], // 可显示的权限
      canShowPage: false // 是否显示当前页面
    }
  },
  activated() {
    this.toTableScrollHeight()
  },
  mounted() {
    this.searchList()
    // 获取权限
    // this.getPower()
    this.$nextTick(() => {
      setTimeout(() => {
        this.setTableScrollHeight()
      }, 1000)
    })
  },
  methods: {
    /* 获取权限 */
    getPower() {
      let id = this.$route.query.mId
      this.getCurPageMenu(id).then((res) => {
        this.powerAry = res
        if (!res.includes(this.powerStr)) {
          this.canGetList = false
          this.alertPower(this.powerStr)
        } else {
          this.canShowPage = true
          this.searchList()
        }
      })
    },
    /*获取状态*/
    getStatus(status) {
      let str = ''
      switch (status) {
        case 'UNSUBMITTED':
          str = '未提交'
          break
        case 'SUBMIT':
          str = '已提交'
          break
        case 'NOT_STARTED':
          str = '未开始'
          break
        case 'ONGOING':
          str = '进行中'
          break
        case 'OVER':
          str = '已结束'
          break
      }
      return str
    },
    /* 获取列表 */
    searchList() {
      this.loading = true
      let obj = Object.assign({}, this.searchParams, this.formInline)
      delete obj.createTime
      getSearchList(
        obj,
        (response) => {
          this.loading = false
          this.tableData = response.rows
          this.total = response.total
        },
        (response) => {
          this.loading = false
          this.$message({
            message: response.message,
            type: 'warning'
          })
        }
      )
    },
    // 导出
    exportRoles() {
      this.$confirm('确定导出所有数据吗？', '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        let url = exportUrl()
        let params = Object.assign({}, this.formInline)
        delete params.createTime
        this.downFile('get', url, params, '活动分析')
      })
    },
    /* 换页 */
    changePage(page) {
      this.searchParams.pageNum = page
      this.searchList()
    },
    /* 搜索 */
    toSearch() {
      this.searchParams.pageNum = 1
      this.searchList()
    }
  }
}
</script>

<style lang="less">
#activeAnalysis {
  .echarts-title {
    font-size: 18px;
    font-weight: bold;
    color: #222;
    padding: 10px 0 10px 30px;
  }
}
</style>
